<template>
	<view class="order">
		<u-tabs :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
		<view class="content">
			<view class="order-list">
				<view class="div-table" v-for="item in orderList" :key="item.id">
					<view class="header">
						<text>[发货时间] 2021-09-29 14:23</text>
						<text>已发货</text>
					</view>
					<view class="body">
						<view class="img">
							<image
								src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202003%2F30%2F20200330155010_UVmvd.thumb.400_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1635333980&t=18673a9535d5f9287a1abfe6e0afb209"
								mode="widthFix"></image>
						</view>
						<view class="right">
							<view class="row">
								<view>
									<text>[抽盒]</text>
									<text class="row-name">{{item.name}}</text>
								</view>
								<text class="row-amount">￥{{item.amount}}</text>
							</view>
							<view class="row">
								<text>[付款时间]{{item.time}}</text>
								<text>x{{item.count}}</text>
							</view>
						</view>
					</view>
					<view class="footer">
						<view>
							<text>共计1个订单</text>
							<u-icon name="arrow-right-double" size="28"></u-icon>
						</view>
						<view>
							<u-button size="mini" shape="circle">运单详情</u-button>
							<u-button size="mini" shape="circle" type="info">确认收货</u-button>
						</view>

					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					name: '待收货'
				}, {
					name: '待付款'
				}, {
					name: '待评价',
					count: 5
				}],
				orderList: [],
				current: 0
			}
		},
		methods: {
			change(index) {
				this.current = index;
				this.getOrderList()
			},
			getOrderList() {
				this.orderList = [{
						id: 0,
						time: '2021-09-09 23:00:00',
						name: '夏日宝宝',
						amount: 50.05,
						count: 1
					},
					{
						id: 1,
						time: '2021-09-09 23:00:00',
						name: '冬日宝宝',
						amount: 50,
						count: 2
					},
					{
						id: 2,
						time: '2021-09-09 23:00:00',
						name: '春日宝宝',
						amount: 50,
						count: 1
					}
				]
			}
		},
		created() {
			this.getOrderList();
		}
	}
</script>

<style lang="scss">
	.order {
		height: 100vh;
		background-color: #f4f5f8;

		.content {
			padding: 0 20rpx;

		}

		.div-table {
			margin: 20rpx 0;
			background-color: #FFFFFF;
			border-radius: 16rpx;
		}

		.img {
			height: 100rpx;
			width: 100rpx;

			image {
				height: 100rpx;
				width: 100rpx;
			}
		}

		.header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx;
		}

		.body {
			position: relative;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-top: 1rpx solid #DCDFE6;
			// border-bottom: 1rpx solid #C8C7CC;

			&::after {
				content: '';
				position: absolute;
				left: 20rpx;
				right: 20rpx;
				bottom: 0;
				height: 1rpx;
				background-color: #DCDFE6;
			}

			.right {
				flex: 1;
				margin-left: 20rpx;
			}

			.row {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.row-name {
					font-weight: bold;
					font-size: 36rpx;
				}

				.row-amount {
					font-weight: bold;
					color: #FA3534;
					font-size: 30rpx;
				}
			}

			padding: 20rpx;
		}

		.footer {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.u-btn {
				margin-left: 20rpx;
			}

			padding: 20rpx;
		}

	}
</style>
